<template>
    <div class="love">
        <div class="header">
            <h2 class="title">我的收藏</h2>
            <div class="menu">
                <div class="menu-item" :class="{ active: activeTab === 'song' }" @click="setActiveTab('song')">单曲</div>
                <div class="menu-item" :class="{ active: activeTab === 'album' }" @click="setActiveTab('album')">专辑</div>
                <div class="menu-item" :class="{ active: activeTab === 'playlist' }" @click="setActiveTab('playlist')">歌单</div>
                <div class="menu-item" :class="{ active: activeTab === 'video' }" @click="setActiveTab('video')">视频</div>
            </div>
        </div>
        <div class="content">
            <component :is="currentComponent" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted, computed, type Ref, type Component } from 'vue'
import LoveSong from '@/components/user/Love/LoveSong.vue'
import LoveAlbum from '@/components/user/Love/LoveAlbum.vue'
import LovePlaylist from '@/components/user/Love/LovePlaylist.vue'
import LoveVideo from '@/components/user/Love/LoveVedio.vue'

// 定义标签类型
type TabType = 'song' | 'album' | 'playlist' | 'video'

const activeTab: Ref<TabType> = ref('song') // 默认选中单曲

// 组件映射
const componentMap: Record<TabType, Component> = {
  song: LoveSong,
  album: LoveAlbum,
  playlist: LovePlaylist,
  video: LoveVideo
}

// 计算当前组件
const currentComponent = computed(() => componentMap[activeTab.value])

// 更新滑动横线位置
const updateSlider = (): void => {
  nextTick(() => {
    const menu: HTMLElement | null = document.querySelector('.love .menu')
    const activeItem: HTMLElement | null = document.querySelector('.love .menu-item.active')
    
    if (activeItem && menu) {
      const menuRect: DOMRect = menu.getBoundingClientRect()
      const itemRect: DOMRect = activeItem.getBoundingClientRect()
      const offsetLeft: number = itemRect.left - menuRect.left
      const itemWidth: number = itemRect.width
      
      // 更新CSS变量来控制横线位置和宽度
      menu.style.setProperty('--slider-left', `${offsetLeft + itemWidth * 0.1}px`)
      menu.style.setProperty('--slider-width', `${itemWidth * 0.8}px`)
    }
  })
}

// 监听activeTab变化
const setActiveTab = (tab: TabType): void => {
  activeTab.value = tab
  updateSlider()
}

onMounted(() => {
  updateSlider()
})
</script>

<style scoped>
.love {
    width: 1200px;
    height: 500px;
    background-color: transparent;
    margin: 100px 100px;
    box-sizing: border-box;
    padding: 20px;
}

.header {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 20px;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
}

.title {
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
    margin: 0;
}

.menu {
    display: flex;
    gap: 30px;
    position: relative;
}

.menu::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: var(--slider-left, 0);
    width: var(--slider-width, 0);
    height: 2px;
    background-color: #ffffff;
    transition: all 0.3s ease;
}

.menu-item {
    color: #999;
    font-size: 16px;
    cursor: pointer;
    padding: 8px 12px;
    position: relative;
    transition: color 0.3s ease;
}

.menu-item:hover {
    color: #ffffff;
}

.menu-item.active {
    color: #ffffff;
    font-weight: bold;
}

.content {
    flex: 1;
    color: #ffffff;
}
</style>